import { PieChartDemos } from '@docs/demos';
import { Layout } from '@/layout';
import { MDX_DATA } from '@/mdx';

export default Layout(MDX_DATA.PieChart);

## Usage

`PieChart` is based on [PieChart recharts component](https://recharts.org/en-US/api/PieChart):

<Demo data={PieChartDemos.usage} />

## Segments labels

Set `withLabels` prop to display labels next to each segment. Use `labelPosition` prop
to control the position of labels relative to the corresponding segment. Note that if
your chart has a lot of segments and `labelPosition="inside"` is set, labels might overlap.
In this case, use `labelPosition="outside`.

<Demo data={PieChartDemos.withLabels} />

## Size

Set `size` prop to control width and height of the chart. Note that if `withLabels` and `labelPosition="outside"` prop are set,
the chart height is automatically increased by 80px to make room for labels. You can override
this behavior by setting `h` and `w` [style prop](/styles/style-props).

<Demo data={PieChartDemos.size} />

## Segment color

You can reference colors from [theme](/theming/theme-object) the same way as in
other components, for example, `blue`, `red.5`, `orange.7`, etc. Any valid CSS
color value is also accepted.

<Demo data={PieChartDemos.color} />

## Enable tooltip

To enable the tooltip, set `withTooltip` prop:

<Demo data={PieChartDemos.tooltip} />

## Tooltip data source

By default, the tooltip displays data for all segments when hovered over any segment.
To display data only for the hovered segment, set `tooltipDataSource="segment"`:

<Demo data={PieChartDemos.tooltipDataSource} />

## Start and end angle

Use `startAngle` and `endAngle` props to control the start and end angle of the chart.
For example, to display a half-circle chart, set `startAngle={180}` and `endAngle={0}`:

<Demo data={PieChartDemos.angle} />

Note that even when `startAngle` and `endAngle` props are set, the chart still takes
the same amount of space as if it was a full circle.

## Segments stroke

Use `strokeWidth` prop to control the width of the stroke around each segment:

<Demo data={PieChartDemos.strokeWidth} />

To change color of the stroke, use `strokeColor` prop. You can reference colors from [theme](/theming/theme-object) the same way as in
other components, for example, `blue`, `red.5`, `orange.7`, etc. Any valid CSS
color value is also accepted.

```tsx
import { PieChart } from '@mantine/charts';

function Demo() {
  return <PieChart data={[]} strokeColor="red.5" />;
}
```

By default, segments stroke color is the same as the background color of the body element
(`--mantine-color-body` CSS variable). If you want to change it depending on the color scheme,
define CSS variable and pass it to the `strokeColor` prop:

<Demo data={PieChartDemos.strokeColor} />
